<template>
    <div class=''>
        <el-card class="box-card" shadow="never">
            <el-button size="small" style="margin-left: 15px;" icon="el-icon-plus" class="iconadd"
                @click="onAdd">新增</el-button>
            <div class="content">
                <el-table :data="tableData" height="calc(55vh - 65px)" :header-cell-style="headerStyle"
                    class="el-table table el-table--fit el-table--scrollable-y el-table--enable-row-hover el-table--enable-row-transition">
                    <el-table-column align="center" label="序号" type="index" width="80">
                    </el-table-column>
                    <el-table-column align="center" prop="model" label="产品型号" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="accessId" label="产品ID" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="accessKey" label="产品密钥" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="network" label="联网方式" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="manufacturerName" label="厂商名称" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="description" label="产品型号描述" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="createTime" label="创建时间" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="management" label="操作" width="150" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
                                <i @click="onEdit(scope.row)" class="iconfont tianxie tableBtnIcon"></i>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                                <i @click="onDel(scope.row.id)" class="iconfont shanchu tableBtnIcon"></i>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination :page.sync="page" :limit.sync="limit" :total="total" @pagination="ProductModelPage"
                    class="pagination">
                </pagination>
            </div>
        </el-card>
        <addProductType ref="refaddProductType" :productId="id"></addProductType>
        <editProductType ref="refeditProductType" :editInfo="editInfo"></editProductType>
    </div>
</template>

<script>
import addProductType from "./modeuls/addProductType.vue";
import editProductType from "./modeuls/editProductType.vue";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { reqProductModelRemove, reqProductModelPage } from "@/api/api";

export default {
    props: ['id'],
    components: {
        Pagination,
        addProductType,
        editProductType
    },
    mixins: [tableStyleMixin],
    data() {
        return {
            page: 1,
            limit: 10,
            total: 0,
            tableData: [],
            editInfo: {},
            model: ""
        }
    },
    computed: {
    },
    watch: {
    },
    mounted() {
    },
    methods: {
        onAdd() {
            this.$refs.refaddProductType.dialogVisible = true;
            this.$refs.refaddProductType.getManufacturerList();
        },
        onEdit(row) {
            this.editInfo = JSON.parse(JSON.stringify(row));
            this.$refs.refeditProductType.dialogVisible = true;
        },
        async onDel(id) {
            const result = await this.$confirm(
                "此操作将永久删除该产品型号, 是否继续?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            ).catch(() => { });
            if (result !== "confirm") return;
            let res = await reqProductModelRemove(id);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.$modal.notifySuccess("删除产品型号成功");
            this.ProductModelPage();
        },
        async ProductModelPage() {
            let res = await reqProductModelPage(this.page, this.limit, {
                productId: this.id,
                model: ''
            });
            // console.log(res);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.tableData = res.data.rows;
            this.total = res.data.total;
        },
    },
}
</script>

<style lang='less' scoped>
@import url("~@views/style/tablePage.less");

::v-deep .el-card__body {
    padding: 0;
}

.box-card {
    min-height: 55vh;
    overflow-y: auto;
}

::v-deep .el-card__body {
    min-height: 55vh;
    overflow-y: auto;
}

.content {
    min-height: 55vh;
    overflow-y: auto;
}

.iconadd {
    background: #7367f0;
    color: #fff;
    border: none;
    margin: 15px 0 0 15px;
}

.tableBtnIcon {
    font-size: 18px;
    cursor: pointer;
    margin: 0 10px;
}
// 禁用鼠标移入时的背景色变化
::v-deep .el-table .el-table__body-wrapper tbody tr:hover > td {
  background-color: transparent !important; /* 使用 !important 确保覆盖 */
}
</style>